<template>
    <div class='Home-page'>
        <div class="top">
            <el-card class="box-card left">
                <div slot="header" class="header clearfix">
                    <span>基本信息</span>
                    <el-button style="float: right;padding:0;" type="text">
                        <i class="el-icon-edit"></i>健康档案
                    </el-button>
                </div>
                <ul>
                    <li v-for="(item, key) in userList[0]" :key="key"><span>{{ item }}:{{ userData[key] }}</span></li>
                </ul>
            </el-card>
            <el-card class="box-card right">
                <div slot="header" class="header clearfix">
                    <span>健康信息</span>
                </div>
                <ul>
                    <li v-for="(item, key) in userList[1]" :key="key"><span>{{ item }}:{{ userData[key] ? userData[key]
                        :
                        '无'
                            }}</span></li>
                </ul>
            </el-card>
        </div>
        <el-card class="box-card bottom">
            <div slot="header" class="header clearfix">
                <span>医疗服务记录</span>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="sj" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="fwtype" label="服务类型" width="180">
                    <template slot-scope="scope">{{ modeList[scope.row.fwtype] }}</template>
                </el-table-column>
                <el-table-column prop="yljgmc" label="医院">
                </el-table-column>
                <el-table-column prop="ksmc" label="科室">
                </el-table-column>
                <el-table-column prop="jgmc" label="结论">
                </el-table-column>
            </el-table>
            <el-row>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-size="limit" layout="total,prev, pager, next, jumper"
                    :total="total" style="text-align: right;">
                </el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import { homeAPI } from '@/http'
export default {
    name: 'Home-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            userData: {},
            userList: [
                {
                    brxm: "姓名",
                    cxjmjkdabh: "联系方式",
                    abo: "abo血型",
                    hyzklbdm: "婚姻状况",
                    xzdz: "现住地址",
                    csrq: "出生年月",
                    xbdm: "性别",
                    jdryxm: "建档人",
                    jdsj: "建档日期",
                }, {
                    cxjmjkdabh: "健康档案号",
                    ywgmy: "药物过敏史",
                    hjwxysbllbdm: "暴露史",
                    jzjbs: "家族史",
                    ycxjbs: "遗传病史"
                }],
            tableData: [],
            modeList: ['挂号', '检查', '住院', '医嘱'],
            total: 0,
            limit: 5,
            currentPage: 1,
        }
    },
    created() {
        this.getUserData()
        this.getTabData()
    },
    methods: {
        getUserData() {
            homeAPI.getHomeAPI({
                page: 1,
                limit: 1
            }).then(res => {
                if (res.code === 200) {
                    // console.log('res:', res);
                    this.userData = res.data
                    // console.log('数据：', this.userData);
                }
            })
        },
        getTabData() {
            homeAPI.getTabAPI({
                page: this.currentPage,
                limit: this.limit,
            }).then(res => {
                if (res.code === 200) {
                    console.log('res:', res);
                    this.tableData = res.data.list
                    this.total = res.data.totalCount
                    console.log('数据：', this.tableData);
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.limit = val;
            this.getTabData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.getTabData();
        },
    }
}
</script>

<style scoped lang="less">
.Home-page {

    & .top {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    & .box-card {
        display: inline-block;
        // width: 100%;

        .header {
            & span {
                font-size: 16px;
            }

            & .text {
                font-size: 14px;
            }
        }

        & ul {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            height: 142px;
            font-size: 16px;

            & li {
                width: 340px;
                padding: 5px;
            }
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }
    }

    & .left {

        & li:nth-child(2n) {
            background: #B3D8FF;
        }
    }

    & .right {
        // margin-left: 10px;

        & li:nth-child(2n+1) {
            background: #B3D8FF;
        }
    }

    & .bottom {
        margin-top: 10px;
        width: 100%;

        /deep/ .el-table {
            margin-bottom: 20px;

            thead {
                color: #fff;
                font-family: "黑体";
            }

            & th.el-table__cell {
                background-color: #B3D8FF;
            }
        }
    }
}
</style>